<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
</head>

<body>
    <div id="app">
        <h1>{{msg}}</h1>
    </div>
    <script>
        const vm = new Vue({
            el: "#app",
            
            //所有的data书写要写成一个函数，函数返回一个数据对象
            data() {
                return {
                    msg: "hello",
                };
            },
        });

        //data为什么写成函数(写成函数缺点)
        //1.声明data(模拟这个是某个组件data)
        const data1 = {
            name:"laowang",
            age: 18,
        };

        //当组件复用的时候,很多地方都要对data操作
        const data1_one = data1;
        const data1_two = data1;

        //在组件1中修改了data1
        //因为data1_one data1_two data1 地址都是一样的,只要修改1个,则其他的全部会发生变化
        //所以我们不会把组件中的data写成的对象,否则组件之间的data会互相影响
        data1_one.age = 20;

        //2..data为什么写成函数(data写成函数如下:)
        function data2() {
            const o = {
            name: "laowang",
            age: 18,
            };
            return o;
        }

        //当组件被复用的时候,需要拿到data2中的数据,则需要调用data2函数
        //每次data2函数的调用,都会创建一个新的对象,所以组件之间的data是不会互相影响的
        const data2_one = data2();
        const data2_two = data2();

    </script>
</body>

</html>